import QtQuick
import Qt5Compat.GraphicalEffects
import Fk
import Fk.Widgets as W

Item {
  id: root
  height: 50
  width: Math.max(imgText.width + 1.2 * height, height * imgScale)

  property bool hovered: false
  property bool enabled: true
  property alias text: imgText.text
  
  signal clicked
  signal rightClicked

  property real imgScale: 222 / 65

  Image {
    id: leftImg
    source: Cpp.path + "/packages/lunarltk-qsgs-ui/image/selfArea/buttons/choice-button-left.png"
    height: root.height
    fillMode: Image.PreserveAspectFit
  }

  Image {
    id: rightImg
    source: Cpp.path + "/packages/lunarltk-qsgs-ui/image/selfArea/buttons/choice-button-right.png"
    height: root.height
    anchors.right: parent.right
    fillMode: Image.PreserveAspectFit
  }

  Image {
    source: Cpp.path + "/packages/lunarltk-qsgs-ui/image/selfArea/buttons/choice-button-middle.png"
    anchors.left: leftImg.right
    anchors.right: rightImg.left
    anchors.top: parent.top
    anchors.bottom: parent.bottom
  }

  Glow {
    id: glowItem
    source: imgText
    anchors.fill: imgText
    color: "black"
    spread: 0.9
    radius: 2.5
  }

  Text {
    id: imgText
    text: "Button"
    color: '#eee9d4'
    font.pixelSize: Math.round(height / 1.1)
    font.letterSpacing: Math.round(height / 1.1) / 8
    width: implicitWidth
    // font.bold: true
    anchors.verticalCenter: parent.verticalCenter
    // style: Text.Outline
    // styleColor: "black"
  }

  

  HoverHandler {
    id: hover
    cursorShape: root.enabled ? Qt.PointingHandCursor : Qt.ArrowCursor
    onHoveredChanged: {
      if (hovered) {
        root.hovered = true;
      } else {
        root.hovered = false;
      }
    }
  }

  Component.onCompleted: {
    if (height * imgScale - (imgText.width + 1.2 * height) > 0 && imgText.text.length > 1) {
      if (imgText.text.length > 3) {
        imgText.width = height * imgScale * 0.75;
      } else if (imgText.text.length === 3) {
        imgText.width = height * imgScale * 0.55;
      } else if (imgText.text.length === 2) {
        imgText.width = height * imgScale * 0.42;
      }
      imgText.font.letterSpacing = 0; 
      const pureWidth = imgText.width - imgText.implicitWidth;
      imgText.font.letterSpacing = pureWidth / (imgText.text.length - 1);
      imgText.width = imgText.implicitWidth - imgText.font.letterSpacing;
    }
    imgText.x = root.width / 2 - imgText.width / 2 + 2
  }


  BrightnessContrast {
    anchors.fill: parent
    source: parent
    brightness: parent.hovered ? 0.3 : -0.4
    contrast: parent.hovered ? 0 : -0.4
    visible: root.enabled && parent.hovered
  }

  Desaturate {
    anchors.fill: root
    source: root
    desaturation: 1.0   // 0.0 = 原色，1.0 = 黑白
    visible: !root.enabled
  }

  W.TapHandler {
    id: mouse
    acceptedButtons: Qt.LeftButton | Qt.RightButton | Qt.NoButton
    gesturePolicy: TapHandler.WithinBounds

    onTapped: (p, btn) => {
      if (parent.enabled) {
        if (btn === Qt.LeftButton || btn === Qt.NoButton) {
          parent.clicked();
        } else if (btn === Qt.RightButton) {
          parent.rightClicked();
        }
      }
    }

    onLongPressed: {
      parent.rightClicked();
    }
  }
}